<template>
	<view class="page-diy">
		<cover-view class="save-tips" v-if="showSaveTips">
			<cover-view class="span">{{remarkSaveTips}}</cover-view>
		</cover-view>
		<view>
			<view class="module-canvans">
				<view
					:class="(showSku || showImg || showImgHandle || showAddWord || showAddImgTips || showTips || showAllPic || showChangeWord || form.local==1)?'canvanHide':''">
					<canvas-drag
						:class="(showSku || showImg || showImgHandle || showAddWord || showAddImgTips || showTips || showAllPic || showChangeWord || form.local==1)?'canvanHide':''"
						ref="canvasRef" :isFu="form.fu" id="canvas-drag" :graph="graph" :width="defaultWidth"
						:height="defaultLength" enableUndo="true" @getIndex="getIndex"></canvas-drag>
				</view>
				<view
					v-if="(showSku || showImg || showImgHandle || showAddWord || showAddImgTips || showTips || showAllPic || showChangeWord)&&form.local==0">
					<image :src="curSkuIdInfo.frontUrl" mode="aspectFill" style="width: 400px;height: 400px;"></image>
				</view>

				<view
					:class="(showSku || showImg || showImgHandle || showAddWord || showAddImgTips || showTips || showAllPic || showChangeWord || form.local==0)?'canvanHide':''">

					<canvas-drag-back
						:class="(showSku || showImg || showImgHandle || showAddWord || showAddImgTips || showTips || showAllPic || showChangeWord || form.local==0)?'canvanHide':''"
						ref="canvasRefBack" :isFu="form.fu" id="canvas-drag-back" :graph="graphBack"
						:width="defaultWidth" :height="defaultLength" enableUndo="true"
						@getIndex="getIndex"></canvas-drag-back>
				</view>
				<view
					v-if="(showSku || showImg || showImgHandle || showAddWord || showAddImgTips || showTips || showAllPic || showChangeWord)&&form.local==1">
					<image :src="curSkuIdInfo.backUrl" mode="aspectFill" style="width: 400px;height: 400px;"></image>
				</view>
			</view>
			<view style="position: relative;">
				<view v-if="curCeng!=-1" class="page-modal"></view>
				<view class="u-flex bm p15">
					<view @click="curCeng = -1,popupList=localList,curFiled='local',showPopup=true" class="fz12 mr20">
						位置：{{localList[form.local]}}<u-icon class="ml6 fz10 c9" name="arrow-down-fill"></u-icon></view>
					<view @click="popupList=fuList,curFiled='fu',showPopup=true" class="fz12 mr20">
						辅助线：{{fuList[form.fu]}}<u-icon class="ml6 fz10 c9" name="arrow-down-fill"></u-icon></view>
					<view class="u-flex u-f-justify">
						<view @click="form.diyType=0" class="set-item" :class="form.diyType==0?'on':''">
							打印DIY
						</view>
						<view @click="form.diyType=1" class="set-item" :class="form.diyType==1?'on':''">
							配饰DIY
						</view>
					</view>
					<!-- <view @click="popupList=diyTypeList,curFiled='diyType',showPopup=true" class="fz12" style="    background: #70B52C;
    color: #fff;
    border-radius: 10rpx;
    padding: 20rpx;">
						DIY类型：{{diyTypeList[form.diyType]}}<u-icon class="ml6 fz10 c255"
							name="arrow-down-fill"></u-icon>
					</view> -->
				</view>
				<!-- <view class="module-action mt20 pl10 pr10" v-if="diyTypeList[form.diyType]=='打印DIY'">

					
				</view> -->

				<view scroll-y="true" class="specs p15" style="width: auto;" v-if="diyTypeList[form.diyType]=='打印DIY'">
					<view class="specs mb16">
						<view class="u-flex" style="flex-wrap: wrap;">
							<view @click="changeSolidType(1)" :class="['sku-word-item',solidType==1?'on':'']">
								热转印DIY
							</view>
							<view @click="changeSolidType(2)" :class="['sku-word-item',solidType==2?'on':'']">
								皮贴DIY
							</view>
						</view>
					</view>
					<view class="specs mb16" v-if="solidType==1">
						<view class="u-flex" style="flex-wrap: wrap;">
							<view style="border: none !important;" @click="changePaoType(1)"
								:class="['sku-word-item',paoType==1?'on':'']">
								文字定制
							</view>
							<view style="border: none !important;" @click="changePaoType(2)"
								:class="['sku-word-item',paoType==2?'on':'']">
								图库
							</view>
						</view>
					</view>
					<view class="specs mb16" v-if="solidType==2">
						<view class="u-flex" style="flex-wrap: wrap;">
							<view style="border: none !important;" @click="changePaoType(1)"
								:class="['sku-word-item',paoType==1?'on':'']">
								图文定制
							</view>
							<view style="border: none !important;" @click="changePaoType(2)"
								:class="['sku-word-item',paoType==2?'on':'']">
								皮贴图库
							</view>
						</view>
					</view>
					<!-- <template v-if="solidType==2 || (solidType==1 && paoType==1)"> -->
					<template v-if="paoType==1">
						<view class="u-flex u-f-jsb mb15 " @click.stop="toPreview([curSku.picUrl])">
							<view>示例图(可放大)</view>
							<view class="u-flex u-f-justify">
								<image :src="curSku.picUrl" style="height:50rpx;max-width:200rpx;" mode="heightFix">
								</image>
								<view style="color: #FE3307;" class="fz16 u-font-bold ml10">￥{{curSku.price}}</view>
							</view>
						</view>
						<view class="specs mb16" v-if="solidType==1">
							<view class="specs-hd p-20-0">
								热转印材质
							</view>
							<view>
								<view class="u-flex" style="flex-wrap: wrap;">
									<view :class="['sku-word-item',hotSpeIndex==index?'on':'']"
										v-for="(item, index) in hotSpeList" :key="index" @click="selectHotSpc(index)">
										<image :src="item.picUrl"
											style="width: 100%;height: 100rpx;display: block;margin: 0 0 10rpx;">
										</image>

										<span>

											{{ item.name }}
										</span>
									</view>
								</view>
							</view>

						</view>
						<view class="specs mb16" v-for="(item, index) in propertyList" :key="index">
							<view class="specs-hd p-20-0">
								<view class="f12 c6">{{ item.propertyName }}<span v-if="solidType==2 && index==1"
										style="font-size: 20rpx;color: #70B52C;">（注:图类为自由形状，成品皮贴边缘为粗略裁剪）</span>
								</view>
							</view>
							<view>
								<view class="u-flex" style="flex-wrap: wrap;" v-if="item.valueList">
									<view
										:class="['sku-word-item',item.curIndex==index1?'on':'',getStr(item.propertyName,'颜色')>-1?'sku-word-item-color':'']"
										v-for="(item1,index1) in item.valueList" :key="index1"
										@click="selectSku(index,index1)">
										<image v-if="item1.valuePicture && getStr(item.propertyName,'颜色')==-1"
											:src="item1.valuePicture"
											style="width: 100%;height: 100rpx;display: block;margin: 0 0 10rpx;">
										</image>
										<view v-if="item1.valuePicture && getStr(item.propertyName,'颜色')!=-1"
											class="quan">
											<!-- @click.stop="toPreview([item1.valuePicture])" -->
											<image :src="item1.valuePicture"
												style="width:100%;height:100%;display: block;border-radius: 50%;margin: 0 auto;">
											</image>
										</view>
										<span>

											{{ item1.valueName }}
										</span>
									</view>
								</view>
							</view>

						</view>


						<view class="module-action mt20 u-flex" v-if="solidType==1"
							@click="showTipsFont=false,curFont=0,showChangeWord=true">
							文案内容
							<view class="input-text">请输入</view>
						</view>
						<view class="module-action mt20 u-flex" v-if="solidType==2">

							<view class="action-item" @click="onAddImage" v-if="curSku.skuName.indexOf('仅来图/图库使用')!=-1">
								<image src="../../static/image/ic-pic.png"
									style="width:48rpx;height:48rpx;display: block;margin: 0 auto 20rpx;"></image>
								添加图片
							</view>
							<view class="action-item" @click="showTipsFont=false,curFont=0,showChangeWord=true"
								v-if="curSku.skuName.indexOf('仅来图/图库使用')==-1">
								<image src="../../static/image/ic-word.png"
									style="width:48rpx;height:48rpx;display: block;margin: 0 auto 20rpx;"></image>
								添加文字
							</view>
							<view class="action-item" @click="showAllPic=true"
								v-if="curSku.skuName.indexOf('仅来图/图库使用')!=-1">
								<image src="../../static/image/ic-tu.png"
									style="width:48rpx;height:48rpx;display: block;margin: 0 auto 20rpx;"></image>
								图库
							</view>
						</view>
					</template>

					<!-- <template v-if="solidType==1 && paoType==2"> -->
					<template v-if="paoType==2">

						<view class="mt10">
							<u-tabs name="label" :list="faCateList" active-color="#70B52C" :is-scroll="true"
								:current="currentFaCate" @change="cateFaChange"></u-tabs>
							<scroll-view scroll-y="true" class="mt20">


								<view class="specs mb16 spec-diy">

									<view class="u-flex pl10 pr10" style="flex-wrap: wrap;">
										<view class="sku-item" @click="toShowPeiSku(item)"
											v-for="(item,index) in faImageList" :key="index">

											<view class="sku-item-content">

												<image :src="item.picUrl"
													style="width:100%;height:106px;display: block;" mode="widthFix">
												</image>
											</view>
											<view class="u-flex u-f-jsb fz12 mt10" style="color: #19291C;">
												<span class="u-line-1">{{item.name}}</span>
												<span>￥{{item.price}}</span>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</template>
				</view>
				<scroll-view :scroll-y="true" v-if="diyTypeList[form.diyType]=='配饰DIY'">
					<view class="page-content ">
						<view v-if="themeList.length>0" class="theme-list bt bm pt20 pl15 pr15  bg-white">
							<view class="item" v-for="(item,index) in themeList" @click="themeClick(index)" :key="index"
								:class="curTheme==index?'on':''">
								<view class="item-img w40 h40 brs-50">
									<image :src="item.picUrl" class=" w40 h40 brs-50" mode="aspectFit"></image>
								</view>
								<view class="item-title fz12 mt10">{{item.name}}</view>
							</view>
						</view>
						<view class="p12 bg-white">
							<u-search :show-action="false" placeholder="搜索关键词" @search="initData"
								v-model="keywordPei"></u-search>
						</view>
						<view class="">
							<!-- @click="toSelect(item)" -->
							<view class="u-flex bg-white" style="flex-wrap: wrap;">
								<view style="" @click="toShowPeiSku(item)" style="width: 33.33%;min-width:  33.33%;"
									class="mb10" v-for="(item,index) in dataList" :key="index">

									<view>
										<view class="p10">

											<view class="u-flex u-f-justify"
												style="background: #f5f5f5;position: relative;">
												<image :src="item.picUrl" style="height:300rpx;" mode="heightFix">
												</image>
												<view @click.stop="toPreview([item.picUrl])"
													class="w30 h30 u-flex u-f-justify"
													style="position: absolute;top:0;right: 0;color: #70B52C;">

													<u-icon class="fz16" name="search"></u-icon>
												</view>
											</view>
											<view class="u-flex u-f-jsb fz12 mt10" style="color: #19291C;">
												<span class="u-line-1">{{item.name}}</span>
												<span>￥{{item.price}}</span>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class=" mt10">

								<u-loadmore :status="loadStatus" v-if="dataList.length>0" />
							</view>
							<view class="order-none u-flex u-f-justify fz16 c9 p50" v-if="dataList.length<=0">
								暂无数据！
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="fixed-bottom p15" style="z-index: 101;">
				<view class="u-flex module-next p15" v-if="curCeng==-1">
					<view class="u-flex u-f-jsb u-f1 pr20">
						<view class="item u-f1" :class="[curAction==0?'on':'']" @click="curAction=0,onClearCanvas()">
							<u-icon name="trash"></u-icon>
							<view class="fz12 fontFirst1">清空画布</view>
						</view>

						<view class="item u-f1" :class="[curAction==2?'on':'']" @click="curAction=2,onExport()">
							<u-icon name="eye"></u-icon>
							<view class="fz12">平面效果</view>
						</view>
					</view>
					<!-- toShow -->
					<view class="btn-sure" @click="onExport(1)">确定</view>
				</view>

				<view class="u-flex u-f-jsb bt pt10 pl20 pr20" style="text-align: center;" v-else>
					<view @click="setWord" v-if="curCengInfo.type=='text' || (curCengInfo.font && curCengInfo.text)">
						<u-icon name="edit-pen"></u-icon>
						<view>文字颜色</view>
					</view>
					<view @click="setWord" v-if="curCengInfo.type=='text' || (curCengInfo.font && curCengInfo.text)">
						<u-icon name="edit-pen"></u-icon>
						<view>字体</view>
					</view>
					<view @click="setSort(1)">
						<u-icon name="edit-pen"></u-icon>
						<view>上移一层</view>
					</view>
					<view @click="diyCopy">
						<u-icon name="bookmark"></u-icon>
						<view class="fz12">复制图层</view>
					</view>
					<view @click="setSort(2)">
						<u-icon name="edit-pen"></u-icon>
						<view>下移一层</view>
					</view>
				</view>
			</view>
		</view>

		<u-picker @confirm="popupConfirm" mode="selector" v-model="showPopup" :range="popupList"></u-picker>

		<u-popup v-model="showAddWord" mode="center" border-radius="20" :closeable="true">
			<view class="p20">
				<view class="u-flex u-f-justify fz15">
					输入文字
				</view>

				<view class="mb15 mt15" style="width: 500rpx;">
					<u-input :border="true" v-model="addWord" placeholder="请输入" type="textarea" :clearable="false" />

				</view>
				<button class="bon" @click="onAddText">确认</button>
			</view>
		</u-popup>

		<u-popup v-model="showChangeWord" mode="bottom" border-radius="20" :closeable="false">
			<view class="p20">
				<view class="u-flex u-f-jsb fz20">
					<u-icon name="close" @click="showChangeWord=false"></u-icon>

					<u-input style="width: 450rpx;" :border="true" v-model="addWord"
						:placeholder="solidType==1?'此颜色仅展示 以热转印颜色为准':'请输入'" type="text" :clearable="false" />
					<button class="bon" style="width: 120rpx;border-radius: 3px;margin: 0;padding:0;"
						@click="onAddText">确认</button>
				</view>

				<view class="mt15" style="min-height: 500rpx;">


					<u-tabs v-if="showChangeWord" :list="tabWord" :is-scroll="false" active-color="#70B52C"
						:current="curTabWord" @change="tabWordChange"></u-tabs>
					<view class="" v-if="curTabWord==0">

						<view class="specs mb16 spec-diy mt15">

							<view class="u-flex pl10 pr10" style="flex-wrap: wrap;">
								<view class="sku-item" v-for="(item,index) in fontList"
									:class="[item,curFont==index?'on':'']" :key="index" @click="curFont=index">

									<view class="sku-item-content" style="height: 50px;">
										<image :src="item.remark" style="width: 80%;" mode="widthFix">
										</image>
									</view>
									<view class="u-flex u-f-justify mt2" style="font-size: 10px;">{{item.value}}</view>
								</view>


							</view>
						</view>
					</view>
					<view class="" v-if="curTabWord==1">
						<color-select ref="colorSelect" @changeColor="getColor" :initColor="fontColor" />

					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :zoom="false" duration="10" v-model="showTips" mode="center" border-radius="20" :closeable="false">
			<view class="p20" style="width: 600rpx;">
				<image src="../../static/image/ic-first-tips.png"
					style="display: block;margin: 0 auto;width: 72rpx;height: 72rpx;"></image>
				<view class="fz14 p15" v-html="remarkTips">
				</view>
				<button class="bon" @click="showTips=false">确认</button>
			</view>
		</u-popup>


		<u-popup v-model="showAddImgTips" mode="center" border-radius="20" :closeable="false">
			<view class="p20" style="width: 600rpx;">
				<image src="../../static/image/ic-first-tips.png"
					style="display: block;margin: 0 auto;width: 72rpx;height: 72rpx;"></image>
				<view class="fz14 p15" v-html="remarkAddImgTips">
				</view>
				<button class="bon" @click="onAddImage">确认</button>
			</view>
		</u-popup>
		<!-- <u-popup v-model="showTipsFont" mode="center" border-radius="20" :closeable="false">
			<view class="p20" style="width: 600rpx;">
				<image src="../../static/image/ic-first-tips.png"
					style="display: block;margin: 0 auto;width: 72rpx;height: 72rpx;"></image>
				<view class="fz14 p15">
					{{remarkTips1}}

				</view>
				<button class="bon" @click="showTipsFont=false,curFont=0,showChangeWord=true">确认</button>
			</view>
		</u-popup> -->

		<u-popup duration="0" :mask-close-able="false" v-model="showImg" mode="center" border-radius="20"
			:closeable="false">
			<view class="p20" style="width: 700rpx;background:#f3f4f6">
				<image :src="curImg" style="width: 100%;" mode="widthFix" v-if="prodInfo.isSingle"></image>
				<view v-else>
					<swiper style="height:800rpx;">
						<swiper-item class="brs10">
							<view class="" style="position: relative;">
								<image class="img" :src="curImg" mode="aspectFill"
									style="width: 100%;height: 800rpx;display: block;">
								</image>
								<span class="yuTips">正面</span>
							</view>
						</swiper-item>
						<swiper-item class="brs10">
							<view class="" style="position: relative;">
								<image class="img" :src="curImgBack" mode="aspectFill"
									style="width: 100%;height: 800rpx;display: block;">
								</image>
								<span class="yuTips">背面</span>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<!-- <u-swiper :list="[curImg,curImgBack]" height="400" v-else>
				</u-swiper> -->
				<button class="bon" @click="closeImg(),isDisabled=false">关闭</button>
			</view>
		</u-popup>

		<u-popup :mask-close-able="false" v-model="showImgHandle" mode="center" border-radius="20" :closeable="false">
			<view class="p20" style="width: 700rpx;">
				<image style="width: 100%;" class="mb10" :src="curAddImg" mode="widthFix"></image>
				<view class="u-flex">
					<button class="bon mr5" @click="imgHandle(1)">直接添加</button>
					<button class="bon ml5" @click="imgHandle(2)">抠图后添加</button>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showAllPic" mode="bottom" border-radius="20" :closeable="false">
			<view>

				<view class="mt10">
					<u-tabs name="label" :list="cateList" active-color="#70B52C" :is-scroll="true" :current="current"
						@change="cateChange"></u-tabs>
					<scroll-view scroll-y="true" class="mt20" style="max-height:800rpx;">
						<view class="specs mb16 spec-diy">
							<view class="u-flex pl10 pr10" style="flex-wrap: wrap;">
								<view class="sku-item" @click="selectAllPic(item)" v-for="(item,index) in imageList"
									:key="index">
									<view class="sku-item-content">
										<image :src="item.picUrl" style="width:100%;height:106px" mode="widthFix">
										</image>
									</view>
								</view>
							</view>
						</view>


					</scroll-view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="showSku" mode="bottom" :closeable="true">
			<view v-if="showSku">
				<view class="p20">
					<view class="u-f-justify fz14 u-font-bold">选择规格</view>
					<view class="u-flex mt15" style="align-items: flex-start;">
						<image @click="prevImg([curPeiSku.picUrl])" class="" :src="curPeiSku.picUrl || peiInfo.picUrl"
							style="width: 180rpx;height: 180rpx;"></image>
						<view class="pl10 u-f1">
							<view class="fz14 u-font-bold u-f-jsb u-flex u-line-1">
								{{peiInfo.name}}
							</view>

							<view class="fz12 c9 u-f-jsb u-flex mt5">
								{{curPeiSku.skuName}}
							</view>
							<view style="color: #FE3307;" class="u-font-bold fz16 mt5">
								￥{{curPeiSku.price}}
							</view>

						</view>
					</view>
					<view class="mt15">

						<scroll-view scroll-y="true" class="specs mt20" style="max-height: 600rpx;">

							<view class="specs mb16 sku-pei" v-for="(item, index) in peiInfo.propertyList" :key="index">
								<!-- <view class="specs-hd p-20-0">
												<text class="f12 c6">{{ item.propertyName }}</text>
											</view> -->
								<view class="u-flex" style="flex-wrap: wrap;" v-if="item.valueList">
									<view :class="['sku-item',item.curIndex==index1?'on':'']"
										v-for="(item1,index1) in item.valueList" :key="index1"
										@click="selectPeiSku(index,index1)">
										<image v-if="item1.valuePicture" :src="item1.valuePicture"
											style="width: 100%;height: 100rpx;display: block;margin: 0 0 10rpx;">
										</image>
										{{ item1.valueName }}
									</view>
								</view>
							</view>
						</scroll-view>
					</view>


				</view>
				<view class="module-btn mt10 u-flex p20 bt">
					<button type="primary" @click="surePeiSku" style="background: #70B52C;" class="btn brs5 u-f1 mr5">
						确定</button>

				</view>
			</view>
		</u-popup>
		<view class="btn-top" @click="toTop">
			<image class="img" src="../../static/image/ic-top.png"></image>
		</view>
	</view>
</template>
<script>
	import canvasDrag from "@/components/canvas-drag/index";
	import canvasDragBack from "@/components/canvas-drag/index1";
	export default {
		components: {
			canvasDrag,
			canvasDragBack
		},
		data() {
			return {
				showAddImgTips: false,
				remarkAddImgTips: `请上传分辨率不低于<span class="xieyi">200dpi清晰图片</span>，格式<span class="xieyi">JPG/JPEG/PNG/BMP</span>，大小5M以内`,
				graph: {},
				showSaveTips: false,
				graphBack: {},
				curCeng: -1,
				showImg: false,
				solidType: 1,
				paoType: 1,
				defaultWidth: '',
				isDisabled: false,
				defaultLength: '',
				fontAttr: ['fontfirst', 'fontsecond', 'fontthird'],
				curFont: 0,
				curCengInfo: {},
				canvasBg: "",
				cateList: [],
				imageList: [],
				showImgHandle: false,
				showAddWord: false,
				addWord: '',
				curAddImg: '',
				curSku: {},
				showChangeWord: false,
				current: 0,
				keywordPei: '',
				showAllPic: false,
				showPopup: false,
				popupList: [],
				curTabWord: 0,
				curAction: 0,
				form: {
					local: 0,
					fu: 0,
					diyType: 0,
				},
				page: 1,
				curImg: '',
				curImgBack: '',
				prodInfo: '',
				psdUrl: '',
				remarkSaveTips: '',
				psdBackUrl: '',
				fontColor: 'rgb(25,41,28)',
				tabWord: [{
					name: '字体'
				}, {
					name: '颜色'
				}, ],
				fontList: [],
				loadStatus: 'more',
				curSkuId: '',
				curSkuIdInfo: '',
				localList: ['正面', '背面'],
				diyTypeList: ['打印DIY', '配饰DIY'],
				fuList: ['关', '开'],
				curFiled: 'local',
				showTips: false,
				diyInfo: {},
				tabList: [],
				dataList: [],
				curTheme: 0,
				themeList: [],
				remarkTips: `请<span class="xieyi">调整文字在包包定制区内</span>，以免定制失败~ 拖动左下角可缩放~`,
				remarkTips1: `请<span class="xieyi">调整图片在包包定制区内</span>，以免定制失败~  `,
				remarkTips2: '请<span class="xieyi">调整文字/图片在包包定制区内</span>，以免定制失败~ 拖动左下角可缩放~ ',
				remarkTips4: `请<span class="xieyi">调整配饰在包包定制区内</span>，以免定制失败~  `,

				info: {},
				propertyList: [],
				// 发泡模图库
				currentFaCate: 0,
				faCateList: [],
				faImageList: [],
				peiInfo: {},
				curPeiSku: {},
				hotSpeIndex: 0,
				hotSpeList: [],
				showSku: false,

			}
		},
		// 页面下拉到底部触发
		onReachBottom() {
			if (this.loadStatus == 'more' && this.form.diyType == 1) {
				this.getProdList()
			}
		},
		onLoad(e) {

			uni.showLoading()
			if (e.diyType) {
				this.form.diyType = e.diyType
			}
			this.$api.dictList({
				dictType: 'diy_word'
			}, res => {
				if (res.code == 200) {
					// this.remarkTips = res.data[2].remark
					// this.remarkTips1 = res.data[3].remark
					// this.remarkTips2 = res.data[4].remark
					this.remarkSaveTips = res.data[5].remark
					// this.remarkAddImgTips = res.data[1].remark


				}
			})

			this.$api.dictList({
				dictType: 'system_source_material_type'
			}, res => {
				if (res.code == 200) {
					this.cateList = res.data
					this.getData()
				}
			})

			this.$api.dictList({
				dictType: 'font'
			}, res => {
				if (res.code == 200) {
					this.fontList = res.data
				}
			})
			if (e.prodId) {
				this.curSkuId = e.id
				this.getProd(e.prodId)
			}
			if (e.diyId) {

				this.$api.compositionDetail({
					id: e.diyId
				}, res => {
					if (res.code == 200) {
						this.diyInfo = res.data
						this.getProd(res.data.spuId)
						this.curSkuId = res.data.skuId
						if (e.type && e.type == 'userOther') {
							delete this.diyInfo.id
						}
					}
				})
			}

			if (e.communityId) {

				this.$api.compositionInfo({
					id: e.communityId
				}, res => {
					if (res.code == 200) {
						this.diyInfo = res.data
						this.curSkuId = res.data.skuId
						this.getProd(res.data.spuId, e.communityId)
					}
				})
			}


			this.$api.categoryAll({
				parentId: 34,
			}, res => {
				if (res.code == 200) {
					this.tabList = res.data
					this.getSecondList()
				}
			})
			this.getHotSpeList()
			this.getFaTuKu(41)

		},
		methods: {
			selectHotSpc(idx) {
				this.hotSpeIndex = idx

				this.getSolidProd(this.hotSpeList[this.hotSpeIndex].id)
			},
			getHotSpeList() {


				this.hotSpeList = []
				this.$api.productInfo({
					id: 1039
				}, res => {
					if (res.code == 200) {
						this.hotSpeList.push(res.data)



						this.$api.productInfo({
							id: 1040
						}, res1 => {
							if (res1.code == 200) {
								this.hotSpeList.push(res1.data)

								this.getSolidProd(1039)
							}
						})
					}
				})

			},
			getFaTuKu(id) {


				// 发泡模分类


				this.$api.categoryAll({
					parentId: id
				}, res => {
					if (res.code == 200) {
						this.faCateList = res.data
						this.currentFaCate = 0
						this.getFaList()
					}
				})
			},
			selectAllPic(item) {
				this.addTieImg()
				delete item.id
				this.toSelect(item)
			},
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300 // 动画时长，默认300ms
				});
			},
			toShowPeiSku(item) {


				this.$api.productInfo({
					id: item.id
				}, res => {
					if (res.code == 200) {
						this.peiInfo = res.data
						this.peiInfo.propertyList = []
						if (res.data.groupList && res.data.groupList.length > 0) {
							this.peiInfo.propertyList = res.data.groupList[0].propertyList



							this.peiInfo.propertyList.some(spc => {
								this.$set(spc, 'curIndex', 0)
							})


							this.getSkuPeiValue()


							this.showSku = true
						} else {

							if (this.peiInfo.skuList && this.peiInfo.skuList.length > 0) {
								this.curPeiSku = this.peiInfo.skuList[0]


								this.showSku = true
							}else{
								
								uni.showToast({
									title: '该商品无库存',
									icon: 'none'
								});
							}
						}

					}
				})

			},
			getStr(str, val) {
				return str.indexOf(val)
			},
			changePaoType(type) {
				this.paoType = type
			},
			changeSolidType(type) {
				this.paoType = 1
				this.solidType = type
				if (type == 1) {
					this.getFaTuKu(41)
					this.getSolidProd(1039)
				} else {

					this.getFaTuKu(48)
					this.getSolidProd(236)
				}
			},

			getSolidProd(id) {


				this.$api.productInfo({
					id
				}, res => {
					if (res.code == 200) {
						this.info = res.data
						this.propertyList = []
						this.info.groupList.some(item => {
							if (item.groupName == '材质/颜色') {
								this.otherAttr = item.propertyList
							} else {
								item.propertyList.some(spc => {
									this.$set(spc, 'curIndex', 0)
								})
								this.propertyList = [...this.propertyList, ...item.propertyList]
							}

						})
						this.getSkuValue()
					}
				})
			},
			toPreview(attr) {
				uni.previewImage({
					urls: attr,
				});
			},
			toSelect2(item) {

				wx.getImageInfo({
					src: item.picUrl,
					complete: (res) => {
						let addInfo = {
							w: res.width / 2,
							h: res.height / 2,
							sourceId: item.id || this.curSku.id,
							type: 'image',
							noResize: true,
							diyType: this.diyTypeList[this.form.diyType],
							url: res.path,
						}
						if (this.curCeng == -1) {

							if (this.form.local == 0) {
								this.setData({
									graph: addInfo
								});
								this.$refs.canvasRef.onGraphChange(this.graph)
								this.showDiyTips()
							} else {
								this.setData({
									graphBack: addInfo
								});
								this.$refs.canvasRefBack.onGraphChange(this.graphBack)
								this.showDiyTips()
							}
						} else {
							if (this.form.local == 0) {

								this.$refs.canvasRef.changTextImg(this.curCeng, res.path)
							} else {

								this.$refs.canvasRefBack.changTextImg(this.curCeng, res.path)
							}
						}
						this.showAllPic = false
					}
				})
			},
			surePeiSku() {
				let post = JSON.parse(JSON.stringify(this.curPeiSku))
				post.picUrl = this.curPeiSku.backUrl
				this.toSelect2(post)
				this.showSku = false
				// uni.pageScrollTo({
				// 	scrollTop: 0,
				// 	duration: 300 // 动画时长，默认300ms
				// });
			},
			selectPeiSku(idx, idx1) {
				this.getSkuPeiValue(idx, idx1)
			},

			getSkuPeiValue(idx, idx1) {
				uni.showLoading()
				setTimeout(() => {
					uni.hideLoading()
				}, 1000 * 15)
				console.log(idx, idx1, 12344)
				let valueIds = []
				let lastValueId = ''
				if (idx != undefined) {
					lastValueId = this.peiInfo.propertyList[idx].valueList[idx1].valueId
				}
				this.peiInfo.propertyList.some((item, index) => {
					if (idx == undefined || index != idx) {
						valueIds.push(item.valueList[item.curIndex].valueId)
					} else {
						valueIds.push(item.valueList[idx1].valueId)
					}

				})
				this.$api.productSku({
					spuId: this.peiInfo.id,
					lastValueId: lastValueId,
					valueIds: String(valueIds)
				}, res => {
					uni.hideLoading()
					if (res.code == 200 && res.data) {
						this.curPeiSku = res.data
						if (idx != undefined) {

							this.peiInfo.propertyList[idx].curIndex = idx1

						}


						if (res.data.isReset) {

							uni.showToast({
								title: '当前规格无库存',
								icon: 'none'
							});
							this.peiInfo.propertyList.some(spc => {
								spc.valueList.some((sku, skuIdx) => {
									res.data.selectValueIds.some((id) => {
										if (sku.valueId == id) {
											spc.curIndex = skuIdx
										}
									})
								})
							})
						}
					} else {

						uni.showToast({
							title: '当前规格不存在',
							icon: 'none'
						});
					}
				})

			},
			selectSku(idx, idx1) {
				this.getSkuValue(idx, idx1)
			},

			getSkuValue(idx, idx1) {
				console.log(idx, idx1, 12344)
				let valueIds = []


				let lastValueId = ''
				if (idx != undefined) {
					lastValueId = this.propertyList[idx].valueList[idx1].valueId
				}
				this.propertyList.some((item, index) => {
					if (idx == undefined || index != idx) {
						valueIds.push(item.valueList[item.curIndex].valueId)
					} else {
						valueIds.push(item.valueList[idx1].valueId)
					}

				})
				this.$api.productSku({
					spuId: this.info.id,
					lastValueId: lastValueId,
					valueIds: String(valueIds)
				}, res => {
					if (res.code == 200 && res.data) {
						this.curSku = res.data
						if (idx != undefined) {

							this.propertyList[idx].curIndex = idx1

						}


						if (res.data.isReset) {

							this.propertyList.some(spc => {
								spc.valueList.some((sku, skuIdx) => {
									res.data.selectValueIds.some((id) => {
										if (sku.valueId == id) {
											spc.curIndex = skuIdx
										}
									})
								})
							})
						}
					} else {

						uni.showToast({
							title: '当前规格不存在',
							icon: 'none'
						});
					}
				})

			},
			themeClick(idx) {
				this.curTheme = idx
				this.initData()
			},


			cateFaChange(e) {
				this.currentFaCate = e
				this.getFaList()
			},

			getFaList() {
				console.log(111111111)
				let post = {
					pageNo: 1,
					pageSize: 500,
					categoryId: this.faCateList[this.currentFaCate].id
				}
				this.$api.productSearch(post, res => {
					if (res.code == 200) {
						this.faImageList = res.data.list
					}
				})
			},
			getSecondList() {
				this.themeList = []

				this.$api.categoryAll({
					parentId: 32,
				}, res => {
					if (res.code == 200) {
						this.themeList = [...this.themeList, ...res.data]

						this.initData()
						// console.log(index, 321213)
						// if (index == 0) {
						// }
					}
				})
				// this.tabList.some((item, index) => {

				// })
			},
			initData() {
				this.page = 1
				this.dataList = []
				this.getProdList()

			},
			getProdList() {
				console.log(111111111)
				let post = {
					pageNo: this.page,
					pageSize: 30,
					keyword: this.keywordPei,
					categoryId: this.themeList[this.curTheme].id
				}

				this.$api.productSearch(post, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.dataList = [...this.dataList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.dataList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			},
			getPictureInformation(url) {
				if (!url) {
					return true
				}
				return new Promise((resolve, reject) => {


					wx.getImageInfo({
						src: url,
						complete: (res) => {
							resolve(res.path)
						}
					})

				})

			},
			getProd(prodId, communityId) {
				this.$api.productInfo({
					id: prodId
				}, res => {
					if (res.code == 200) {
						if (res.data.isSingle) {
							this.localList = ['正面']
						}
						this.prodInfo = res.data
						this.defaultWidth = res.data.defaultWidth / 2
						this.defaultLength = res.data.defaultLength / 2
						this.getSw(res.data.swUrl)

						this.psdUrl = res.data.cxPreviewUrl
						this.psdBackUrl = res.data.cxPreviewUrl

						if (this.diyInfo.id) {



							this.$nextTick(() => {
								let paramsDiy = JSON.parse(this.diyInfo.params)

								let paramsDiyFont = paramsDiy
								if (paramsDiy.font) {
									paramsDiyFont = paramsDiy.font
								}
								if (paramsDiy.front) {
									paramsDiyFont = paramsDiy.front
								}
								let attrFont = []


								paramsDiyFont.some(item => {
									if (item.type != 'bgImage') {
										attrFont.push(item)
									}
								})
								const promiseQueue = [];
								attrFont.forEach(item => {
									let a = this.getPictureInformation(item.url)
									promiseQueue.push(a)
								})



								Promise.all(promiseQueue).then((values) => {
									console.log(values, 12112)
									values.some((item, index) => {
										if (attrFont[index]) {
											attrFont[index].url = item
										}
									})
									this.$refs.canvasRef.initByArr(attrFont);
									this.onChangeBgImage(this.curSkuIdInfo.frontUrl, this
										.curSkuIdInfo.backUrl)
									if (communityId) {
										delete this.diyInfo.id
									}
								})
								if (paramsDiy.back) {
									let attrBack = []


									paramsDiy.back.some(item => {
										if (item.type != 'bgImage') {
											attrBack.push(item)
										}
									})
									const promiseQueueBack = [];
									attrBack.forEach(item => {
										let a = this.getPictureInformation(item.url)
										promiseQueueBack.push(a)
									})



									Promise.all(promiseQueueBack).then((values) => {
										console.log(values, 12112)
										values.some((item, index) => {
											if (attrBack[index]) {
												attrBack[index].url = item
											}
										})
										this.$refs.canvasRefBack.initByArr(attrBack);
									})
								}
							})
						}
					}
				})
			},
			closeImg() {
				this.curImg = ''
				this.curImgBack = ''
				setTimeout(() => {

					this.onChangeBgImage(this.curSkuIdInfo.frontUrl, this.curSkuIdInfo.backUrl)
					this.showImg = false
				}, 10)
			},
			getSw(url) {


				this.$api.productSku({
					skuId: this.curSkuId,
				}, res => {
					if (res.code == 200 && res.data) {

						this.curSkuIdInfo = res.data
						if (!this.diyInfo.id) {
							this.onChangeBgImage(this.curSkuIdInfo.frontUrl, this.curSkuIdInfo.backUrl)

						}
						let curSku = res.data
						let attr = []
						curSku.properties.some((item) => {
							let i = {
								name: item.propertyName,
								value: item.valueName,
							}
							attr.push(i)
						})
						uni.hideLoading()

						// this.$api.diySwPreview({
						// 	url,
						// 	attrs: JSON.stringify(attr)
						// }, res => {
						// 	uni.hideLoading()
						// 	if (res.code == 200) {
						// 		this.psdUrl = res.data.front_url
						// 		this.psdBackUrl = res.data.back_url


						// 	}
						// })
					} else {

						uni.showToast({
							title: '当前规格不存在',
							icon: 'none'
						});
					}
				})
			},
			tabWordChange(e) {
				this.curTabWord = e
			},
			getColor(e) {
				this.fontColor = e
			},
			getIndex(res) {
				console.log(res)
				this.curCeng = res.index
				this.curCengInfo = res.info
			},

			diyCopy() {
				this.$refs.canvasRef.toCopy(this.curCeng)
			},
			setSort(type) {

				this.$refs.canvasRef.changSort(this.curCeng, type)
			},
			toShow() {

				uni.navigateTo({
					url: '/pages/diy/show'
				})
			},
			cateChange(e) {
				this.current = e
				this.getData()
			},
			getData() {


				this.$api.sourceMaterialList({
					pageNo: 1,
					pageSize: 500,
					type: this.cateList[this.current].value
				}, res => {
					if (res.code == 200) {
						this.imageList = res.data.list
					}
				})

			},

			getProdSku(id, imgInfo) {


				this.$api.productInfo({
					id
				}, res => {
					if (res.code == 200) {

						let skuId = res.data.skuList[0].id
						console.log(skuId, 1111112222222)
						if (this.form.local == 0) {
							this.setData({
								graph: {
									w: imgInfo.width / 2,
									h: imgInfo.height / 2,
									sourceId: skuId,
									type: 'image',
									diyType: this.diyTypeList[this.form.diyType],
									url: imgInfo.path
								}
							});

							this.$refs.canvasRef.onGraphChange(this.graph)
							this.showDiyTips()
						} else {
							this.setData({
								graphBack: {
									w: imgInfo.width / 2,
									h: imgInfo.height / 2,
									sourceId: skuId,
									type: 'image',
									diyType: this.diyTypeList[this.form.diyType],
									url: imgInfo.path
								}
							});
							this.$refs.canvasRefBack.onGraphChange(this.graphBack)
							this.showDiyTips()
						}
						this.showAllPic = false
					}
				})
			},
			showDiyTips() {
				if (!this.$db.get('diyPingTips') && this.form.diyType == 0 && this.solidType == 1 && this.paoType == 1) {
					this.showTips = true
					this.$db.set('diyPingTips', true)
				}

				if (!this.$db.get('diyFontTips') && this.form.diyType == 0 && this.solidType == 1 && this.paoType == 2) {
					this.remarkTips = this.remarkTips1
					this.showTips = true
					this.$db.set('diyFontTips', true)
				}

				if (!this.$db.get('diyPiTips') && this.form.diyType == 0 && this.solidType == 2) {
					this.remarkTips = this.remarkTips2
					this.showTips = true
					this.$db.set('diyPiTips', true)
				}
				// && this.themeList[this.curTheme].name == '贴饰'
				if (!this.$db.get('diyGuaTips') && this.form.diyType == 1) {
					this.remarkTips = this.remarkTips3
					this.showTips = true
					this.$db.set('diyGuaTips', true)
				}
				setTimeout(() => {
					this.toTop()
				}, 200)
				setTimeout(() => {
					this.showTips = false
				}, 1000 * 5)
			},
			toSelect1(item) {
				wx.getImageInfo({
					src: item.picUrl,
					complete: (res) => {
						console.log(res, item, 9999)
						let width = res.width
						let height = res.height
						let addInfo = {
							w: width / 2,
							h: height / 2,
							sourceId: item.id,
							type: 'image',
							diyType: '皮贴',
							url: res.path,
						}
						if (this.curCeng == -1) {

							if (this.form.local == 0) {
								this.setData({
									graph: addInfo
								});
								this.$refs.canvasRef.onGraphChange(this.graph)
								this.showDiyTips()
							} else {
								this.setData({
									graphBack: addInfo
								});
								this.$refs.canvasRefBack.onGraphChange(this.graphBack)
								this.showDiyTips()
							}
						} else {
							if (this.form.local == 0) {

								this.$refs.canvasRef.changTextImg(this.curCeng, res.path)
							} else {

								this.$refs.canvasRefBack.changTextImg(this.curCeng, res.path)
							}
						}
						this.showAllPic = false
					}
				})
			},
			toSelect(item, font, text) {
				console.log(item, this.form.diyType, 111111)
				wx.getImageInfo({
					src: item.picUrl,
					complete: (res) => {
						// && this.solidType == 1
						if (this.form.diyType == 0 && this.paoType == 2) {
							this.getProdSku(item.id, res)
							return
						}
						let width = 100
						if (font && text) {
							width = res.width
							if (res.width > 200) {

								width = 200
							}
						}

						let height = (res.height) / ((res.width) / width)

						// if(this.form.diyType==1 && this.paoType!=2){
						// 	this.propertyList.some(item=>{
						// 		if(this.getStr(item.propertyName,'尺寸')>-1){
						// 			let remark=item.valueList[item.curIndex].valueRemark
						// 			if(remark){
						// 				width=remark.split('*')[0]
						// 				height=remark.split('*')[0]
						// 			}
						// 		}
						// 	})
						// }
						let addInfo = {
							w: width,
							h: height,
							sourceId: item.id || this.curSku.id,
							type: 'image',
							diyType: this.diyTypeList[this.form.diyType],
							url: res.path,
						}
						console.log(addInfo, 1213123)
						if (font && text) {
							addInfo.font = font
							addInfo.text = text
						}

						if (this.curCeng == -1) {

							if (this.form.local == 0) {
								this.setData({
									graph: addInfo
								});
								this.$refs.canvasRef.onGraphChange(this.graph)
								this.showDiyTips()
							} else {
								this.setData({
									graphBack: addInfo
								});
								this.$refs.canvasRefBack.onGraphChange(this.graphBack)
								this.showDiyTips()
							}
						} else {
							if (this.form.local == 0) {

								this.$refs.canvasRef.changTextImg(this.curCeng, res.path)
							} else {

								this.$refs.canvasRefBack.changTextImg(this.curCeng, res.path)
							}
						}
						this.showAllPic = false
					}
				})
			},

			popupConfirm(e) {
				let ids = e[0]
				this.form[this.curFiled] = ids
			},
			setWord() {
				this.addWord = this.curCengInfo.text
				this.showChangeWord = true
			},

			/**
			 * 添加图片
			 */
			imgHandle(type) {

				this.addTieImg()
				if (type == 1) {


					let i = {
						picUrl: this.curAddImg
					}
					this.toSelect(i)
					this.showImgHandle = false
					return
				}
				uni.showLoading({
					title: '图片处理中'
				});
				this.$api.diyMatting({
					url: this.curAddImg
				}, res => {
					uni.hideLoading()
					if (res.code == 200) {
						let i = {
							picUrl: res.data
						}
						this.toSelect(i)
						this.showImgHandle = false
					}
				})
			},
			onAddImage() {
				if (!this.$db.get('diyAddImgTips')) {
					this.showAddImgTips = true
					this.$db.set('diyAddImgTips', true)
					return
				}
				this.showAddImgTips = false
				this.$api.uploadFiles(res => {
					if (res.code == 200) {
						this.curAddImg = res.data
						this.showImgHandle = true
					}
				})
				// wx.chooseImage({
				// 	success: res => {

				// 		diyMatting
				// 		this.setData({
				// 			graph: {
				// 				w: 200,
				// 				h: 200,
				// 				type: 'image',
				// 				url: res.tempFilePaths[0]
				// 			}
				// 		});
				// 	}
				// });
			},

			/**
			 * 添加文本
			 */
			onAddText() {
				if (!this.addWord) {
					uni.showToast({
						title: '请输入文字',
						icon: 'none'
					});
					return
				}

				// let font = ''
				// if (this.curFont >= 0) {
				// 	font = this.fontAttr[this.curFont]
				// }
				let post = {
					text: this.addWord,
					fontName: this.fontList[this.curFont].value,
					fontSize: 40,
					fontColor: this.fontColor
				}

				this.addTieImg()
				this.$api.genFontpic(post, res => {
					if (res.code == 200) {
						this.toSelect({
							picUrl: res.data.url
						}, this.fontList[this.curFont].value, this.addWord)
						this.showChangeWord = false
					}
				})
			},
			addTieImg() {

				// if(this.isPiTied){
				// 	return
				// }
				if (this.form.diyType == 0) {
					this.propertyList.some(item => {
						if (this.getStr(item.propertyName, '尺寸') > -1) {
							let remark = item.valueList[item.curIndex].valueRemark
							if (remark) {
								post.width = remark.split('*')[0]
								post.height = remark.split('*')[0]
							}
							let img = item.valueList[item.curIndex].valuePicture
							if (img) {
								this.toSelect1({
									picUrl: img
								})
							}
						}
					})
				}

				if (this.form.diyType == 0 && this.solidType == 2) {
					this.toSelect1({
						picUrl: this.curSku.backUrl
					})
				}
			},
			toImg(e) {
				if (!e) {
					return true
				}
				console.log(e);
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.$config.apiBaseUrl + "api/file/upload", //仅为示例，非真实的接口地址
						filePath: e,
						fileType: 'image',
						name: 'file',
						header: {

							'Accept': 'application/json',
							'Content-Type': 'application/x-www-form-urlencoded',
							'Authorization': this.$db.get("userToken")
						},
						formData: {
							'file': e
						},
						success: (uploadFileRes) => {

							console.log(uploadFileRes.data, 121212)
							resolve(JSON.parse(uploadFileRes.data).data)
						},
						fail: (error) => {

							this.$common.errorToShow(error)
						},
					});
				})

			},

			/**
			 * 导出图片
			 */
			onExport(type) {

				if (this.isDisabled) {
					return
				}
				this.isDisabled = true
				this.form.fu = 0
				console.log(this.psdUrl, 123)

				if (!type) {
					this.showImg = true
				} else {
					uni.showLoading({
						title: '生成中'
					})

					setTimeout(() => {
						uni.hideLoading()
					}, 1000 * 15)
					this.showSaveTips = true
				}
				
					this.$refs.canvasRef.exportFun().then(filePath => {
						console.log(filePath);
						this.curImg = filePath
				
						if (type) {
							this.onExportJSON()
						}
					}).catch(e => {
						console.error(e);
					});
					
					this.$refs.canvasRefBack.exportFun().then(filePath => {
						console.log(filePath);
						this.curImgBack = filePath
					
						// if (type) {
						// 	this.onExportJSON()
						// }
					}).catch(e => {
						console.error(e);
					});
				// wx.getImageInfo({
				// 	src: this.psdUrl,
				// 	complete: (res) => {
				// 		console.log(res.path, 1111)
				// 		this.$refs.canvasRef.changeBgImage1(res.path)

				// 		setTimeout(() => {
				// 			this.$refs.canvasRef.exportFun().then(filePath => {
				// 				console.log(filePath);
				// 				this.curImg = filePath

				// 				if (type) {
				// 					this.onExportJSON()
				// 				}
				// 			}).catch(e => {
				// 				console.error(e);
				// 			});
				// 		}, 500)
				// 	}
				// })

				// wx.getImageInfo({
				// 	src: this.psdBackUrl,
				// 	complete: (res) => {
				// 		console.log(res.path, 1111)
				// 		this.$refs.canvasRefBack.changeBgImage1(res.path)


				// 		setTimeout(() => {

				// 			this.$refs.canvasRefBack.exportFun().then(filePath => {
				// 				console.log(filePath);
				// 				this.curImgBack = filePath

				// 				// if (type) {
				// 				// 	this.onExportJSON()
				// 				// }
				// 			}).catch(e => {
				// 				console.error(e);
				// 			});
				// 		}, 50)
				// 	}
				// })


			},

			onExportJSON() {
				this.toImg(this.curImg).then((res) => {

					if (this.prodInfo.isSingle) {

						this.toApiPost(res)
					} else {

						this.toImg(this.curImgBack).then((res1) => {

							this.toApiPost(res, res1)
						})
					}
				})
			},

			toApiPost(res, res1) {

				this.$nextTick(() => {
					this.$refs.canvasRef.exportJson().then(imgArr => {

						this.$refs.canvasRefBack.exportJson().then(imgArr1 => {


							const promiseQueue = [];
							let imgAll = [...imgArr, ...imgArr1]
							imgAll.some(item => {
								if (item.type == 'image' && item.font && item.text) {
									item.type == 'text'
								}
								let a = this.toImg(item.url)
								promiseQueue.push(a)
							})
							Promise.all(promiseQueue).then((values) => {
								values.some((item, index) => {
									imgAll[index].url =
										item
								})
								let params = {
									front: [],
									back: [],
								}
								imgAll.some((item, index) => {
									if (index < imgArr
										.length) {
										if (item.w && item.y) {

											params.front.push(
												item)
										}
									} else {

										if (res1) {


											if (item.w && item.y) {

												params.back.push(item)
											}
										}

									}
								})

								let post = {
									spuId: this.prodInfo.id,
									skuId: this.curSkuId,
									picUrl: res,
									sliderPicUrl: res,
									params: JSON.stringify(
										params),
									otherParams: {}
								}
								if (res1) {
									post.sliderPicUrl = res + ',' + res1
								}
								let print = []
								let font = []
								let pendant = []
								imgAll.some((item, index) => {
									if (item.type ==
										'image' || item
										.type ==
										'text') {
										if (item.diyType ==
											'打印DIY') {

											let i = {
												id: item.sourceId
											}
											if (item
												.type ==
												'image') {
												i.pic_url =
													item
													.url
											}
											if (item
												.type ==
												'text') {
												i.name =
													item
													.text
											}
											// print.push(i)
											pendant.push(i)
										}
										// if (item.diyType ==
										// 	'打印DIY') {

										// 	let i = {
										// 		id: item
										// 			.sourceId,
										// 		name: ''
										// 	}
										// 	pendant.push(i)
										// }
										if (item.diyType ==
											'配饰DIY') {

											let i = {
												id: item.sourceId,
												name: item
													.text
											}
											font.push(i)
										}
									}
								})
								post.otherParams = JSON.stringify({
									print,
									pendant,
									font
								})

								let api = 'compositionSave'
								if (this.diyInfo.id) {
									api = 'compositionUpdate'
									post.id = this.diyInfo.id
								}
								this.$api[api](post, res => {

									uni.hideLoading()

									this.showSaveTips = false
									if (res.code == 200) {
										uni.redirectTo({
											url: '/pages/diy/show?id=' +
												res
												.data
												.id
										})
										setTimeout(() => {

											this.isDisabled = false
										}, 1500)
									} else {
										this.isDisabled = false
										this.$common
											.errorToShow(
												res
												.message)
									}
								})
								console.log(imgArr, 122222)
							})
						})

					}).catch(e => {
						console.error(e);
					});
				})

			},
			/**
			 * 改变背景照片
			 */
			onChangeBgImage(url, urlBack) {
				if (!url) {

					this.$refs.canvasRef.changeBgImage()
					this.$refs.canvasRefBack.changeBgImage()
					return
				}
				console.log(12345)
				wx.getImageInfo({
					src: url,
					complete: (res) => {
						this.$refs.canvasRef.changeBgImage(res.path)
					}
				})
				if (urlBack) {

					wx.getImageInfo({
						src: urlBack,
						complete: (res) => {
							this.$refs.canvasRefBack.changeBgImage(res.path)
						}
					})
				}
			},

			onClearCanvas: function(event) {
				let _this = this;
				_this.setData({
					canvasBg: null
				});

				if (this.form.local == 0) {

					this.$refs.canvasRef.clearCanvas();
				} else {

					this.$refs.canvasRefBack.clearCanvas();
				}

				this.onChangeBgImage(this.curSkuIdInfo.frontUrl, this.curSkuIdInfo.backUrl)
			},

		},
	}
</script>
<style lang="scss">
	.module-canvans {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 300px;
		// background: #f5f5f5;
	}

	.bon {
		width: 100%;
		background: #70B52C;
		padding: 15rpx;
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		border-radius: 10px;
		font-weight: normal;
	}

	.sku-item {
		width: 33.33%;
		min-width: 33.33%;
		color: #888;
		font-size: 24rpx;
		text-align: center;
		margin-bottom: 24rpx;

		.sku-item-content {

			border: 1px solid #f5f5f5;
			background: rgba(25, 41, 28, 0.05);
			margin: 0 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&.on {
			.sku-item-content {

				border: 1px solid #70B52C;
				color: #70B52C;
			}
		}
	}

	.module-action {
		.action-item {

			border-radius: 8rpx;
			border: none;
			background: rgba(25, 41, 28, 0.05);
			color: #19291C;
			padding: 40rpx 20rpx;
			width: 200rpx;
			font-size: 24rpx;
			text-align: center;
			margin: 0 15rpx;

		}
	}

	.btn-sure {

		width: 160rpx;
		text-align: center;
		background: #70B52C;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 10px;
		font-weight: normal;
	}

	.module-next {
		background: rgba(25, 41, 28, 0.05);
		border-radius: 16rpx;

		.item {
			text-align: center;
			font-size: 40rpx;

			&.on {
				color: #FE3307;
			}
		}
	}


	.page-diy {
		padding: 0 0 300rpx;
	}

	.canvanHide {
		position: fixed;
		top: -1000px;
		left: -1000px;

	}
</style>

<style lang="scss">
	.sku-item {
		width: 33.33%;
		min-width: 33.33%;
		color: #888;
		font-size: 24rpx;
		text-align: center;
		margin-bottom: 24rpx;

		.sku-item-content {

			border: 1px solid #f5f5f5;
			background: rgba(25, 41, 28, 0.05);
			margin: 0 10rpx;
		}

		&.on {
			.sku-item-content {

				border: 1px solid #70B52C;
				color: #70B52C;
			}
		}
	}

	.module-action {
		.action-item {

			border-radius: 8rpx;
			border: none;
			background: rgba(25, 41, 28, 0.05);
			color: #19291C;
			padding: 40rpx 20rpx;
			width: 200rpx;
			font-size: 24rpx;
			text-align: center;
			margin: 0 15rpx;

		}
	}

	.btn-sure {

		width: 160rpx;
		text-align: center;
		background: #70B52C;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 10px;
		font-weight: normal;
	}

	.module-next {
		background: rgba(25, 41, 28, 0.05);
		border-radius: 16rpx;

		.item {
			text-align: center;
			font-size: 40rpx;

			&.on {
				color: #FE3307;
			}
		}
	}


	.theme-list {
		display: flex;
		text-align: center;
		overflow: auto;

		.item {
			padding: 0 30rpx 30rpx;

			&.on {
				border-bottom: 1px solid #70B52C;

				.item-img {
					border: 1px solid #70B52C;
				}
			}
		}

		.item-img {
			overflow: hidden;
			background: #F4F4F4;
		}

		.item-title {
			color: #19291C;
		}
	}


	.sku-word-item {
		border-radius: 8rpx;
		border: 1px solid #888;
		width: 200rpx;
		padding: 10rpx;
		color: #888;
		font-size: 24rpx;
		text-align: center;
		margin-top: 24rpx;
		margin-right: 24rpx;

		&.on {
			border: 1px solid #70B52C !important;
			color: #70B52C;
		}

		&.sku-word-item-color {
			width: 120rpx;
			border: none !important;

			.quan {

				width: 100rpx;
				height: 100rpx;
				padding: 10rpx;
				margin-bottom: 10rpx;
				border-radius: 50%;
				border: 1px solid #888;
			}

			;

			&.on {
				.quan {

					border: 1px solid #70B52C !important;
					color: #70B52C;
				}

				;
			}
		}
	}

	.page-modal {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.save-tips {
		position: fixed;
		top: 30rpx;
		left: 0;
		right: 0;
		z-index: 10000;
		display: flex;
		justify-content: center;

		.span {
			background: #FE3307;
			color: #fff;
			border-radius: 50rpx;
			padding: 10rpx 20rpx;
		}
	}


	.btn-top {
		position: fixed;
		right: 0;
		z-index: 100;
		bottom: 250rpx;

		.img {
			width: 130rpx;
			height: 130rpx;
		}
	}

	.sku-pei {

		.sku-item {
			border-radius: 8rpx;
			border: 1px solid #888;
			width: 28%;
			min-width: 28%;
			padding: 10rpx;
			color: #888;
			font-size: 24rpx;
			text-align: center;
			margin-top: 24rpx;
			margin-right: 20rpx;

			&.on {
				border: 1px solid #70B52C;
				color: #70B52C;
			}
		}
	}

	.yuTips {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
	}

	.set-item {

		background: #666;
		color: #fff;
		border-radius: 10rpx;
		padding: 16rpx;
		font-size: 24rpx;
		margin-right: 16rpx;

		&.on {

			color: #fff;
			background: #70B52C;
		}
	}

	.input-text {
		border: 1px solid #70B52C;
		flex: 1;
		border-radius: 3px;
		padding: 20rpx;
		margin-left: 30rpx;
		color: #999;

	}
</style>